<template>
  <div class="com-container">
    <div class="health-score-box radius shadow">
      <health-score />
    </div>
    <div class="holographic-box radius shadow">
      <holographic />
    </div>
    <div class="device-box radius shadow">
      <device-table />
    </div>
  </div>
</template>

<script>
import Holographic from "@/components/Holographic.vue";
import healthScore from "@/components/HealthScore.vue";
import DeviceTable from "@/components/DeviceTable.vue";
export default {
  components: {
    holographic: Holographic,
    "health-score": healthScore,
    "device-table": DeviceTable,
  },
  data() {
    return {
      msg: "",
    };
  },
  mounted() {},
  created() {},
  methods: {},
};
</script>

<style scoped>
.holographic-box {
  position: absolute;
  right: 0;
  width: 65%;
  height: 35%;
}
.health-score-box {
  position: absolute;
  left: 0;
  top: 0;
  width: 30%;
  height: 35%;
}
.device-box {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60%;
}
</style>